/**
*  会员俱乐部 - 组建
*/
<template>
  <el-tabs class="h-vip" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="会员级别" name="first">
      <h3 class='h-vip-title'>一：VIP会员申请</h3>
      <p class="h-info">1、顾客免费申请加入VIP会员俱乐部；</p>
      <p class="h-info">2、凡满足申请条件的顾客，可凭当日消费凭证及本人身份证至客服中心(收银台)按照相关规定办理入会手续。</p>
      <h3 class='h-vip-title'>二：VIP会员级别</h3>
      <p class="h-info">1、VIP会员的级别分为初级、中级、高级、钻石（福卡会员、银卡会员、金卡会员、钻石卡会员）。</p>
      <ul class="h-vip-list">
        <li>
          <img src="@/assets/img/vip1.png" />
          <p>福卡会员</p>
          <span>当日消费即可申请</span>
        </li>
        <li>
          <img src="@/assets/img/vip2.png" />
          <p>银卡会员</p>
          <span>累计消费满2999元升级</span>
        </li>
        <li>
          <img src="@/assets/img/vip3.png" />
          <p>金卡会员</p>
          <span>累计消费满19999元升级</span>
        </li>
        <li style="margin-top:50px;">
          <img src="@/assets/img/vip4.png" />
          <p>钻石卡会员</p>
          <span>累计消费满39999元升级</span>
        </li>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="会员折扣" name="second" >
      <img src="@/assets/img/zktqxq.png" style="min-height:500px;" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { footerList } from '@/mock' // 脚部数据
import { footerData } from '@/api'

export default {
  name: 'FooterBar',
  props: {},
  data () {
    return {
      activeName: 'first',
      footerData: [],
    }
  },
  created () {
    // this.getFooterData() // 底部数据加载
  },
  mounted () {
    this.footerData = footerList.result // 使用接口时 此处删除
  },
  methods: {
    getFooterData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      footerData(params).then(res => {
        this.footerData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-vip {
    
  }
  .h-vip-title{
    font-size: 20px;
    color: #333;
  }
  .h-info{
    padding-left: 20px;
  }
  /* 会员卡 等级 */
  .h-vip-list{
    margin: 30px 0 50px 0;
    overflow: hidden;
    li{
      margin-left: 50px;
      float: left;
      text-align: center;
       width: 25%;
      img{
        width: 100%;
      }
      p{
        margin: 5px 0;
        font-size: 18px;
        color: #333;
        font-weight: bold;
      }
    }
  }
</style>
